/* eslint-disable react/no-danger */
import React, { PureComponent } from 'react';
import moment from 'moment';
import { Card, Button } from 'antd';
import { connect } from 'dva';
import queryString from 'query-string';
import router from 'umi/router';
import downloadFile, { getFileName, matchDict } from '@/utils/utils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; // 引入头部组件
import FooterToolbar from '@/components/FooterToolbar';
import 'react-quill/dist/quill.snow.css'; // 引入富文本编辑器样式

@connect(({ guideprotect }) => ({
  guideprotect,
}))
class BasicList extends PureComponent {
  componentDidMount() {
    const { dispatch, location } = this.props;
    dispatch({
      type: 'guideprotect/queryDictItemsByCodes',
      payload: ['BIZ_INS_TYPE', 'BIZ_ACCU_TYPE'],
    });
    const { id } = queryString.parse(location.search);
    this.getContent(id);
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'guideprotect/updateModelData',
      payload: {
        policyData: [],
        cityChild: [],
        affixArr: [],
        contentData: {},
        content: '',
        vno: '',
        detailId: '',
      },
    });
  }

  getNameArr = dicArr => {
    const {
      guideprotect: { policyData },
    } = this.props;
    const arr = [];
    dicArr.split(',').forEach(value => {
      arr.push(matchDict(policyData, value));
    });
    return arr.join();
  };

  downLoad = item => {
    const file = item.split('|');
    downloadFile({ fileId: file[0], fileName: getFileName(file[1]) });
  };

  getContent = id => {
    const { dispatch } = this.props;
    dispatch({
      type: 'guideprotect/getContent',
      payload: {
        plcyId: id,
      },
    });
  };

  // 取消
  goBack = () => {
    router.push('/searchmanage/guideprotect/index');
  };

  render() {
    const {
      guideprotect: { content, contentData, affixArr },
    } = this.props;
    return (
      <div>
        <PageHeaderWrapper>
          <Card title="服务指南">
            <div id="nowId">
              <h1 style={{ textAlign: 'center' }}>{contentData.tit}</h1>
              <p>政策类型：{contentData.type && this.getNameArr(contentData.type)}</p>
              <p>政策地区：{contentData.areaName}</p>
              <p>来源：{contentData.source ? contentData.source : '无'}</p>
              <p>
                公布时间：
                {contentData.publishTime ? moment(contentData.publishTime).format('LL') : '无'}
              </p>
              <p dangerouslySetInnerHTML={{ __html: content }} />
              <p>{contentData.affix ? '附件：' : ''}</p>
            </div>
            {affixArr.map((item, i) => {
              const affixItem = item.split('|')[1];
              const affixName = getFileName(affixItem);
              return (
                // eslint-disable-next-line react/no-array-index-key
                <p key={i}>
                  <a onClick={() => this.downLoad(item)}>{affixName}</a>
                </p>
              );
            })}
          </Card>
          <FooterToolbar>
            <Button onClick={this.goBack}>返回</Button>
          </FooterToolbar>
        </PageHeaderWrapper>
      </div>
    );
  }
}

export default BasicList;
